<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<meta name="description" content="Site de relacionamento animal" />

		<!--start of styles-->
		<link rel="stylesheet" type="text/css" href="../css/south-street/jquery-ui-1.8.20.custom.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/slide.css" />
		<link rel="stylesheet" type="text/css" href="../css/testimony.css" />
		<link rel="stylesheet" type="text/css" href="../css/forms.css" />
		<link rel="stylesheet" type="text/css" href="../css/upload/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="../css/jquery.fileupload-ui.css">
		<!--end of styles-->
		
		<script type="text/javascript" src="../js/jquery/jquery-1.8.2.js"></script>
		<script type="text/javascript" src="../js/jquery/jquery-ui-1.8.21.custom.js"></script>
		<script type="text/javascript" src="../js/jquery/jquery.json-2.3.js"></script>
				
		<script type="text/javascript">
		</script>
	</head>

	<body>
		<div id="all">
			<div id="main">
				<div id="header">
				</div>
				
				<div id="content">
					<div class="form-content">
						<h1>Atualização da imagem do perfil</h1>
						<div class="container">
						    <!-- The file upload form used as target for the file upload widget -->
						    <form id="fileupload" action="/dotcao/ws/file/upload/profile/picture" method="POST" enctype="multipart/form-data">
						        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
						        <div class="row fileupload-buttonbar">
						            <div class="span7">
						            	<div>
							            	<button id="back-to-wall" class="button">
							            		<img src="../images/layout/wall.png" />
							            		Voltar para o Mural
							            	</button>
	
							            	<button id="back-to-profile" class="button">
							            		<img src="../images/layout/settings.png" />
							            		Voltar para a edição do Perfil
							            	</button>
						            	</div>
						            	
						                <!-- The fileinput-button span is used to style the file input field as button -->
						                <span class="btn btn-success fileinput-button">
						                    <i class="icon-plus icon-white"></i>
						                    <span>Adicionar Arquivos...</span>
						                    <input type="file" name="files[]" multiple>
						                </span>
						                <button type="submit" class="btn btn-primary start">
						                    <i class="icon-upload icon-white"></i>
						                    <span>Iniciar upload</span>
						                </button>
						                <button type="reset" class="btn btn-warning cancel">
						                    <i class="icon-ban-circle icon-white"></i>
						                    <span>Cancelar upload</span>
						                </button>
		                                <button type="button" class="btn btn-danger delete">
                    						<i class="icon-trash icon-white"></i>
                    						<span>Delete</span>
                						</button>
                						<input type="checkbox" class="toggle">
                						
                						<label>Caso seja informada mais do que uma imagem será considerada apenas aquela que o servidor receber por último</label>
						            </div>
						            <!-- The global progress information -->
						            <div class="span5 fileupload-progress fade">
						                <!-- The global progress bar -->
						                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
						                    <div class="bar" style="width:0%;"></div>
						                </div>
						                <!-- The extended global progress information -->
						                <div class="progress-extended">&nbsp;</div>
						            </div>
						        </div>
						        <!-- The loading indicator is shown during file processing -->
						        <div class="fileupload-loading"></div>
						        <br>
						        <!-- The table listing the files available for upload/download -->
						        <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
						    </form>
						</div>
						
						<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload">
        <td class="preview"><span class=""></span></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>Start</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete">
            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                <i class="icon-trash icon-white"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
{% } %}
</script>
		<script src="../js/jquery/upload/tmpl.js"></script>
		<script src="../js/jquery/upload/load-image.js"></script>
		<script src="../js/jquery/upload/canvas-to-blob.js"></script>
		<script src="../js/jquery/upload/jquery.iframe-transport.js"></script>
		<script src="../js/jquery/upload/jquery.fileupload.js"></script>
		<script src="../js/jquery/upload/jquery.fileupload-fp.js"></script>
		<script src="../js/jquery/upload/jquery.fileupload-ui.js"></script>
		<script src="../js/upload/profile.js"></script>
					</div>
				</div>
				
				<div class="clear"></div>
			</div>
			
			<div id="footer">
				<ul class="menu">
					<li class="first">
						<a href="#">Home</a>
					</li>
					<li>
						<a href="#">DotCao</a>
					</li>
					<li>
						<a href="#">Fale Conosco</a>
					</li>
					<li>
						<a href="#">Mapa do site</a>
					</li>
				</ul>
			</div>
		</div>
		
	</body>
</html>
